<template>
    <div class="left_nav">
        <el-menu class="el-menu-vertical-demo" :unique-opened="true" router background-color="#000000" text-color="hsla(0,0%,100%,.8)" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
            <el-menu-item>
                <!-- <i class="el-icon-bank-card"></i> -->
                <img :src="logo" class="logo">
                <span slot="title" class="logo_title">博客管理系统</span>
            </el-menu-item>
            <el-menu-item index="/">
                <i class="el-icon-s-home"></i>
                <span slot="title">后台首页</span>
            </el-menu-item>
            <el-submenu v-for="(item,index) in menuList" :index="'' + index" :key="index">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.authName }}</span>
                </template>
                <el-menu-item v-for="(subItem,index) in item.children" :index="'/' + subItem.path.toString()" :key="index">
                    <span>{{subItem.authName}}</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>



<script>
    import img from '@/assets/logo.png'
    export default {
        props: ['isCollapse'],
        data() {
            return {
                logo: img,
                // isCollapse: true,
                menuList: [
                    {
                        id: 0,
                        authName: '用户管理',
                        icon: 'el-icon-s-custom',
                        children: [
                            {
                                authName: '用户列表',
                                id: 1,
                                path: 'userList',
                                parentid: 0,
                            },
                        ],
                    },
                    {
                        id: 1,
                        authName: '文章管理',
                        icon: 'el-icon-s-claim',
                        children: [
                            {
                                authName: '文章分类',
                                id: 1,
                                path: 'blogAddCate',
                                parentid: 1,
                            },
                            {
                                authName: '文章列表',
                                id: 2,
                                path: 'blogList',
                                parentid: 1,
                            },
                        ],
                    },
                    {
                        id: 2,
                        authName: '站点管理',
                        icon: 'el-icon-office-building',
                        children: [
                            {
                                authName: '站点介绍',
                                id: 1,
                                path: 'infoContent',
                                parentid: 2,
                            },
                            // {
                            //     authName: '权限管理',
                            //     id: 2,
                            //     path: 'authority',
                            //     parentid: 2,
                            // },
                        ],
                    },
                ],
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath)
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath)
            },
        },
        // 监视路由发生改变将改变后的路由数据存储到vuex内
        watch: {
            $route(key) {
                let data = {
                    path: key.fullPath,
                    // keepAlive: key.meta.keepAlive,
                    title: key.meta.title,
                }
                console.log(data)
                // this.$store.dispatch("addRoutingPathData", data);
                this.$store.dispatch('tabsModule/addRoutingPathData', data)
            },
        },
    }
</script>

<style lang="scss" scoped>
    .left_nav {
        background-color: #000000;
    }
    .el-radio-group {
        font-size: 20px;
        line-height: 60px;
        margin-left: 10px;
        color: #ffffff;
    }
    /* 侧边菜单 */
    .el-menu {
        border: 0;
        text-align: left;
        height: auto;
        max-height: 500px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    // .el-menu-item.is-active {
    //     background-color: #409eff !important;
    //     color: #fff;
    //     span {
    //         color: #fff !important;
    //     }
    // }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        height: auto;
    }
    .logo_title {
        font-size: 16px;
        margin-left: 17px;
    }
</style>
